<template>
    <div class="cal-item-wrapper">
        <div style="font-size: 6px;color: #615C5C; ">
            {{ dt.week }}
        </div>
        <div v-bind:class="{'selected': select}"
             style="display:flex;align-items:center;align-content:center;justify-items:center;font-size: 28px;width: 55px;height: 55px;margin-top: 10px;margin-bottom: 10px;">
           <div style="margin-left: 8px">
               {{ dt.day }}
           </div>

        </div>
        <div v-if="select" style="width: 8px;height: 8px;background-color: #83bdfb;border-radius: 50px"></div>

    </div>
</template>

<script>
export default {
    name: "CalenderItem",
    props: ['dt', 'select'],

}
</script>

<style scoped>
.cal-item-wrapper {
    display: flex;
    flex-direction: column;
    margin-left: 50px;
    align-items: center;
    justify-items: center;
    align-content: center;
}

.selected {
    color: white;
    background-color: #298DF8;
    border-radius: 50px;
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.4);
}
</style>